<template>
	<div class="profile-wrapper">
		<el-card class="el-card_profile" shadow="hover">
			<div class="avatar-uploader-wrapper">
				<el-upload
					class="avatar-uploader"
					:action="actionURL"
					:headers="{ satoken: ` ${token}` }"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					name="avatarFile"
				>
					<img v-if="user.avatar" :src="user.avatar" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>

			<ul class="list-group">
				<li class="list-group-item">
					<i class="el-icon-user"></i>
					<b>用户名称</b>
					<div class="pull-right">{{ user.username }}</div>
				</li>
				<li class="list-group-item">
					<i class="el-icon-mobile-phone"></i>
					<b>手机号码</b>
					<div class="pull-right">{{ user.phoneNumber }}</div>
				</li>
				<li class="list-group-item">
					<i class="el-icon-phone-outline"></i>
					<b>用户邮箱</b>
					<div class="pull-right">{{ user.email }}</div>
				</li>
				<li class="list-group-item">
					<i class="el-icon-user-solid"></i>
					<b>所属角色</b>
					<div class="pull-right">{{ user.roleId }}</div>
				</li>
				<li class="list-group-item">
					<i class="el-icon-date"></i>
					<b class="m-l">创建日期</b>
					<div class="pull-right">
						{{ user.createTime }}
					</div>
				</li>
			</ul>
		</el-card>
	</div>
</template>

<script>
import * as userApi from '@/api/userApi'
import config from '@/config/index.js'
import { getToken } from '@/libs/token'

export default {
	name: 'MyProfile',
	data() {
		return {
			actionURL: `${config.baseContext}/user/profile/uploadAvatar`,
			// 用于上传图片
			token: getToken(),
			// 用户信息
			user: {},
			// 个人信息加载状态
			loading: {
				required: true,
				type: Boolean
			}
		}
	},
	created() {
		this.getUserDetail()
	},
	methods: {
		getUserDetail() {
			const loginId = this.$store.state.user.loginId
			userApi.getUserDetail(loginId).then((res) => {
				if (res.success) {
					this.user = res.data.userDTO
					this.loading = false
				} else {
					this.$notify.error(res.message)
				}
			})
		},
		//获取头像成功钩子
		handleAvatarSuccess(res) {
			this.$store.commit('SET_AVATAR', res.data)
			this.user.avatar = this.$store.state.user.avatar
			this.$notify.success('上传成功')
		}
	}
}
</script>

<style lang="stylus">
.profile-wrapper {
  align-items: center;
  justify-content: center;

  .el-card_profile {
    border-radius: 15px;
    width: 600px;
    height: 550px;
  }

  .avatar-uploader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 10px 0
    margin-bottom: 20px

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

  .list-group {
    padding-left: 0;
    list-style: none;

    .list-group-item {
      border-bottom: 1px solid #e7eaec;
      border-top: 1px solid #e7eaec;
      padding: 20px 0;

      b {
        margin-left: 10px
      }
    }

    .pull-right {
      float: right;
    }
  }
}
</style>
